<template>
<view class="proxy-page">
    <loading-view v-if="showLoading"></loading-view>
	
	
	
    <view class="header" v-if="!showLoading">
        <view class="user-info row">
            <view class="user-avatar">
                <custom-image width="100%" height="100%" round :src="userInfo.user.avatar" />
                <view class="avatar-tag white">高级代理</view>
            </view>
            <view class="user-message-container column ml20 white">
                <view class="row mb10">
                    <view class="xxl bold" style="line-height: 50rpx">{{userInfo.user.nickname}}</view>
                </view>
                <view class="xs row" style="line-height: 30rpx;text-align: left;">
                    我的邀请人：{{!inviteStatus ? '无' : userInfo.leader.nickname}} <view v-if="!inviteStatus" class="br60 white write-btn row-center" @tap="showInvitePop">填写</view>
                </view>
            </view>
        </view>
    </view>
    <view class="main" v-if="!showLoading">
        <view class="user-vip">
            <view class="user-assets-box">
				<view class="box-header">
					<view class="label">代理社区</view>
					<view class="text">江苏省常州市新北区</view>
				</view>
                <view class="user-assets-content row wrap">
                    <view class="user-item column-center">
                        <view class="nr user-assets-name row" style="color: #8F430E">
                            今日预估收益
                        </view>
                        <view class="assets mt20">
                            <price-format weight="bold" :showSubscript="true" :firstSize="36" :subscriptSize="26" :secondSize="36" :price="today_earnings" color="#FF2C3C" />
                        </view>
                    </view>
                    <view class="user-item column-center">
                        <view class="nr user-assets-name row" style="color: #8F430E">
                            本月预估收益
                            <!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
                        </view>
                        <view class="assets mt20">
                            <price-format weight="bold" :showSubscript="true" :firstSize="36" :subscriptSize="26" :secondSize="36" :price="month_earnings" color="#FF2C3C" />
                        </view>
                    </view>
                    <view class="user-item column-center">
                        <view class="nr user-assets-name row" style="color: #8F430E">
                            累计获得收益<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
                        </view>
                        <view class="assets mt20">
                            <price-format weight="bold" :showSubscript="true" :firstSize="36" :subscriptSize="26" :secondSize="36" :price="history_earnings" color="#FF2C3C" />
                        </view>
                    </view>
                </view>
            </view>
            <view class="mt20 fans-msg-box row bg-white md">
                <navigator url="/bundle/pages/user_fans/user_fans" hover-class="none" class="my-fans row-center normal">
                    我的粉丝 <span class="primary ml10">{{userInfo.fans || 0}}</span>
                    <u-icon class="ml10" name="arrow-right" size="28rpx" color="#666" />
                </navigator>
                <view class="line"></view>
                <navigator url="/bundle/pages/invite_fans/invite_fans" hover-class="none" class="invite-fans row-center normal">
                    邀请粉丝
                    <u-icon class="ml10" name="arrow-right" size="28rpx" color="#666" />
                </navigator>
            </view>
            <view class="withdrawal-box">
				<view class="title">待提现（元）</view>
				<view class="content">
					<view class="value">0.00</view>
					<navigator class="btn" hover-class="none" url="/bundle/pages/user_withdraw/user_withdraw">去提现</navigator>
				</view>
			</view>
            <view class="usual-tools-box bg-white mt20">
                <view class="usual-tools-header row lg bold">
                    我的服务
                </view>
                <view class="usual-content row">
                    <navigator hover-class="none" url="/package_store/pages/proxy_order/index?type=1" class="usual-item column-center">
                        <image src="../../static/images/menu_icon_1.png" class="usual-item-img"></image>
                        <view class="nr normal mt20" style="line-height: 40rpx">我的订单</view>
                    </navigator>
					<navigator hover-class="none" url="/package_store/pages/proxy_order/index?type=2" class="usual-item column-center">
					    <image src="../../static/images/menu_icon_2.png" class="usual-item-img"></image>
					    <view class="nr normal mt20" style="line-height: 40rpx">团队订单</view>
					</navigator>
					<navigator hover-class="none" url="/bundle/pages/user_spread_income/user_spread_income" class="usual-item column-center">
					    <image src="../../static/images/menu_icon_3.png" class="usual-item-img"></image>
					    <view class="nr normal mt20" style="line-height: 40rpx">佣金明细</view>
					</navigator>
                    <navigator hover-class="none" url="/bundle/pages/user_spread_month_bill/user_spread_month_bill" class="usual-item column-center">
                        <image src="../../static/images/menu_icon_4.png" class="usual-item-img"></image>
                        <view class="nr normal mt20" style="line-height: 40rpx">月度账单</view>
                    </navigator>
					<view class="usual-item column-center" @tap="onScanQrcode">
					    <image src="../../static/images/menu_icon_5.png" class="usual-item-img"></image>
					    <view class="nr normal mt20" style="line-height: 40rpx">取件核销</view>
					</view>
					<navigator hover-class="none" url="/package_store/pages/proxy_return_goods/index" class="usual-item column-center">
					    <image src="../../static/images/menu_icon_6.png" class="usual-item-img"></image>
					    <view class="nr normal mt20" style="line-height: 40rpx">归还确认(4)</view>
					</navigator>
					<navigator hover-class="none" url="/package_store/pages/proxy_team/index" class="usual-item column-center">
					    <image src="../../static/images/menu_icon_7.png" class="usual-item-img"></image>
					    <view class="nr normal mt20" style="line-height: 40rpx">我的团队</view>
					</navigator>
					<navigator hover-class="none" url="/package_goods/pages/proxy_goods_list/index" class="usual-item column-center">
					    <image src="../../static/images/menu_icon_8.png" class="usual-item-img"></image>
					    <view class="nr normal mt20" style="line-height: 40rpx">我的商品</view>
					</navigator>
                </view>
            </view>
        </view>
    </view>
    <u-popup v-model="showPop" @close="onClose" mode="center" border-radius="30">
        <view class="inviteformContain column-center">
            <view class="title xl">填写邀请人</view>
            <view class="input-row row">
                <view style="width: 140rpx;">邀请码：</view>
                <input :value="inviteCode" @input="onInput" placeholder="请输入邀请码" />
            </view>
            <view class="btn bg-primary white row-center" @tap="inputInviteCodeFun">确定</view>
        </view>
    </u-popup>
    <u-select v-model="showRegion" mode="mutil-column-auto" @confirm="regionChange" :list="regionLists" ></u-select>
</view>
</template>

<script>

import { inputInviteCode, applyVip, applyVipDetail, getInviteInfo, getPromoteHome, veryfiyDistribute } from "@/api/user";
import area from '@/utils/area'
import {copy} from '@/utils/tools'
export default {
  data() {
    return {
      showLoading: true,
      // 弹窗展示
      showPop: false,
      inviteCode: '',
      realName: '',
      reason: '',
      region: '',
      // 省id
      provinceId: -1,
      // 市id
      cityId: -1,
      // 区ID
      districtId: -1,
      // 推销状态 0 ==> 未申请 1 ==> 申请进度 2 ==> 已申请
      vipState: 0,
      userInfo: {
          user: {},
          leader: {}
      },
      // 审核信息对象
      applyObject: {},
      // 邀请人状态
      inviteStatus: false,
      showRegion: false,
      regionLists: area,
      able_withdrawal: 0,
      history_earnings: 0,
      month_earnings: 0,
      today_earnings: 0,
	  isShowTips: true,			// 公告消息开关
    };
  },

  components: {
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.showLoading = true
    this.veryfiyDistributeFun()
  },

 
  methods: {
    onInput(e) {
        this.inviteCode = e.detail.value
    },
	
	onScanQrcode(){
		uni.scanCode({
			onlyFromCamera: true,
			scanType: "qrCode",
			success: (res) => {
				console.log(res.code)
			}
		})
	},

    // 申请成功数据
    getPromoteHomeFun() {
      getPromoteHome().then(res => {
        if (res.code == 1) {
          if (res.data.leader.length <= 0) {
            this.inviteStatus = false;
          } else {
            this.inviteStatus = true;
          }
          this.userInfo = res.data;
          this.able_withdrawal = res.data.able_withdrawal
          this.history_earnings = res.data.history_earnings
          this.month_earnings = res.data.month_earnings
          this.today_earnings = res.data.today_earnings
        }
      });
    },

    veryfiyDistributeFun() {
        veryfiyDistribute().then(res => {
            if(res.code == 10001) {
                this.vipState = 2
                // 填写表单
                this.getInviteInfoFun();
                this.getPromoteHomeFun();
                if(this.showLoading == true) {
                    this.showLoading = false
                }
            }
            else if(res.code == 20001) {
                // 获取详情
                this.vipState = 0;
                this.getInviteInfoFun();
                this.applyVipDetailFun()
            }
            else if(res.code == 0) {
                // 返回上一页
                setTimeout(() => {
                    uni.navigateBack()
                }, 500)
            }
        })
    },

    // 最新分销会员申请详情
    applyVipDetailFun() {
      applyVipDetail().then(res => {
        if(res.code == 1) {
            switch(res.data.status) {
                case 0:
                    // 待审核
                case 2:
                    // 审核不通过
                    this.vipState = 1;
                    this.applyObject = res.data
                    break;
                case 1:
                    this.getPromoteHomeFun();
                    break;
            }
            if(this.showLoading == true) {
                this.showLoading = false
            }
        }
      });
    },

    reApply() {
      this.vipState = 0
    },

    regionChange(region) {
      this.region = region[0].label + " " + region[1].label + " " + region[2].label
      this.provinceId = region[0].value;;
      this.cityId = region[1].value;
      this.districtId = region[2].value
    },

    formSubmit(e) {
      let {
        provinceId,
        cityId,
        districtId,
        reason
      } = this;
      console.log('formSubmit')

      if (!this.realName) {
        this.$toast({
          title: "请填写真实姓名"
        });
        return;
      }

      if (!this.region.length) {
        this.$toast({
          title: "请选择省市区"
        });
        return;
      }

      let data = {
        real_name: this.realName,
        province: provinceId,
        city: cityId,
        district: districtId,
        reason: reason
      };
      this.applyVipFun(data);
    },

    // 分销会员申请
    applyVipFun(data) {
      applyVip(data).then(res => {
        if (res.code == 1) {
          this.$toast({
            title: res.msg
          });
          this.applyVipDetailFun();
        }
      });
    },

    // 填写邀请码
    inputInviteCodeFun() {
      inputInviteCode({
        code: this.inviteCode
      }).then(res => {
		  this.$toast({
			  title: res.msg
		  })
        if (res.code == 1) {
          this.showPop = false
          this.getInviteInfoFun();
        }
      });
    },

    showInvitePop() {
      this.showPop = true;
    },

    // 获取邀请人信息
    getInviteInfoFun() {
      getInviteInfo().then(res => {
        if (res.code == 1) {
          if (res.data.leader.length <= 0) {
            this.userInfo = res.data;
            this.inviteStatus = false
          } else {
            this.userInfo = res.data;
            this.inviteStatus = true
          }
        }
      });
    },

    textareaChange(e) {
        this.reason = e.detail.value
    },

    onClose() {
      this.showPop = false;
    },

    onCopy() {
      copy(this.userInfo.user.distribution_code)
    },

    // 显示提示窗口
    showToolTip(e) {
      this.animate("#today-profit");
    }

  }
};
</script>
<style lang="scss">
@import "index.scss";
</style>